<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'

const username = ref("")
const $router = useRouter()
const enterChatRoom = () => {
    if (username.value.length > 0) {
        $router.push(`/chatroom?username=${username.value}`)
    } else {
        ElMessage.error("临时用户名不能为空")
    }
}
const username2 = ref("")
const enterVideoRoom = () => {
    if (username2.value.length > 0) {
        $router.push(`/videoroom?username=${username2.value}`)
    } else {
        ElMessage.error("临时用户名不能为空")
    }
}
const username3 = ref("")
const enterShareDoc = () => {
    if (username3.value.length > 0) {
        $router.push(`/sharedoc?username=${username3.value}`)
    } else {
        ElMessage.error("临时用户名不能为空")
    }
}

const username4 = ref("")
const enterShareBoard = () => {
    if (username4.value.length > 0) {
        $router.push(`/shareBoard?username=${username4.value}`)
    } else {
        ElMessage.error("临时用户名不能为空")
    }
}

</script>

<template>
    <div class="home_container">
        <div class="floor">
            <span>临时用户名</span>
            <el-input v-model="username" input-style="width:200px" class="space" />
            <el-button type="primary" class="space" @click="enterChatRoom">进入聊天室</el-button>
        </div>
        <div class="floor">
            <span>临时用户名</span>
            <el-input v-model="username2" input-style="width:200px" class="space" />
            <el-button type="primary" class="space" @click="enterVideoRoom">进入直播室</el-button>
        </div>
        <div class="floor">
            <span>临时用户名</span>
            <el-input v-model="username3" input-style="width:200px" class="space" />
            <el-button type="primary" class="space" @click="enterShareDoc">进入共享文档</el-button>
        </div>
        <div class="floor">
            <span>临时用户名</span>
            <el-input v-model="username4" input-style="width:200px" class="space" />
            <el-button type="primary" class="space" @click="enterShareBoard">进入共享白板</el-button>
        </div>
    </div>
</template>

<style scoped lang='less'>
.home_container {
    width: 100vw;
    height: 100vh;
    padding: 0 10%;
    display: flex;
    flex-direction: column;
    white-space: nowrap;

    .floor {
        display: flex;
        justify-content: center;
        align-items: center;
        .space {
            margin: 10px 20px;
        }
    }
}
</style>